<template>
  <el-container v-loading="loading">
    <el-header style="height: 50px">
      <!-- 图例 -->
      <el-row class="legend">
        <el-col v-for="(item, index) in colorLegend" :key="index" :span="6">
          <div class="color-legend">
            <span class="legend-icon" :style="{ background: item.bgColor}" />
            <span class="legend-name">{{ item.name }}</span>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="content" style="padding: 0">
      <el-container>
        <el-aside v-if="floorList.length > 0" style="background-color: #FFF;padding: 0;margin-bottom: 0" width="50px">
          <div v-for="(item,index) in floorList" :key="index" class="content-left-item">
            <div class="content-left-item-left">{{ item }}层</div>
            <div class="content-left-item-right" />
          </div>
        </el-aside>
        <el-main style="padding: 0; margin-left: 10px">
          <!-- 楼层与房间 -->
          <template v-if="unitType === 1">
            <div v-for="(item1, index1) in areaData" :key="index1">
              <div class="floor-single">
                <!--对象为层-->
                <div v-if="item1.status == 0" :style="{background: getColor(item1.status)}" class="van-ellipsis">
                  {{ item1.name }}
                </div>
                <div
                  v-else-if="item1.status != 0 && item1.status"
                  :style="{background: getColor(item1.status)}"
                  class="van-ellipsis"
                >
                  {{ item1.name }}
                </div>
              </div>
            </div>
          </template>
          <template v-else-if="unitType === 2">
            <div v-for="(item1, index1) in areaData" :key="index1" class="floor-single1">
              <!--房间所在层-->
              <div
                v-for="(item2, index2) in item1"
                :key="index2"
                class="floor-single1-box"
                :class="{'rowspan': item2.rowspan > 1, 'colspan': item2.colspan > 1}"
              >
                <!--房间 当前报验-->
                <div
                  v-if="selRoomIds.indexOf(item2.objectId) >= 0"
                  :style="{ background: getColor(2),height: item2.rowspan > 1 ? (30 * item2.rowspan + (item2.rowspan - 1) * 2) + 'px' : '30px',
                            'line-height': item2.rowspan > 1 ? (30 * item2.rowspan + (item2.rowspan - 1) * 2) + 'px' : '30px',
                            width: item2.colspan > 1 ? (90 * item2.colspan + (item2.colspan - 1) * 3) + 'px' : '90px' }"
                  class="van-ellipsis"
                  @click="chooseRoom(item2.objectId)"
                >
                  {{ item2.name }}
                </div>
                <!--房间 未报验-->
                <div
                  v-else-if="item2.status == 0"
                  :style="{ background: getColor(item2.status),height: item2.rowspan > 1 ? (30 * item2.rowspan + (item2.rowspan - 1) * 2) + 'px' : '30px',
                            'line-height': item2.rowspan > 1 ? (30 * item2.rowspan + (item2.rowspan - 1) * 2) + 'px' : '30px',
                            width: item2.colspan > 1 ? (90 * item2.colspan + (item2.colspan - 1) * 3) + 'px' : '90px' }"
                  class="van-ellipsis"
                  @click="chooseRoom(item2.objectId)"
                >
                  {{ item2.name }}
                </div>
                <!--房间 已报验-->
                <div
                  v-else-if="item2.status != 0 && item2.status"
                  :style="{background: getColor(item2.status),
                           height: item2.rowspan > 1 ? (30 * item2.rowspan + (item2.rowspan - 1) * 2) + 'px' : '30px',
                           'line-height': item2.rowspan > 1 ? (30 * item2.rowspan + (item2.rowspan - 1) * 2) + 'px' : '30px',
                           width: item2.colspan > 1 ? (90 * item2.colspan + (item2.colspan - 1) * 3) + 'px' : '90px'
                  }"
                  class="van-ellipsis"
                >
                  {{ item2.name }}
                </div>
              </div>
            </div>
          </template>
          <!-- 楼栋 -->
          <div v-else-if="unitType === 3" class="object-buiding" :style="{ height: floorHeight }">
            <div :style="{background: getColor(areaData.status),height:'100%'}" style="display: flex;align-items: center; justify-content: center">
              {{ areaData.name }}
            </div>
          </div>
          <div v-else-if="unitType === 6" class="wall-plane">
            <div class="wall-plane-main">
              <div v-for="(item, index) in areaData" :key="index" class="plane-content-block">
                <div v-if="item.length > 0" class="block-wrapper">
                  <div
                    v-for="(item1, index1) in item"
                    :key="index1"
                    class="block-item"
                    :style="{ backgroundColor: getColor(item1.status) }"
                  >
                    <span>{{ item1.name }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="wall-plane-bottom">
              <div class="plane-item-label">东</div>
              <div class="plane-item-label">南</div>
              <div class="plane-item-label">西</div>
              <div class="plane-item-label">北</div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import { getSingleProgress } from '@/api/statement/processSchedule'
export default {
  name: 'CheckStateArea',
  props: {
    /* 标题 */
    title: {
      type: String,
      default: ''
    },
    /* 报验楼栋ID */
    buildingId: {
      type: String,
      default: ''
    },
    /* 报验工序ID */
    checkTableId: {
      type: String,
      default: ''
    },
    /* 角色 */
    roleKey: {
      type: String,
      default: ''
    },
    /* 当前报验单房间 */
    selRoomIds: {
      type: Array,
      default: function() {
        return []
      }
    },
    /* 是否可操作 */
    isEdit: {
      type: Boolean,
      default: true
    },
    /* 显示类型  取值类型：check - 验收情况  inspect - 报验情况*/
    showType: {
      type: String,
      default: 'check'
    }
  },
  data() {
    return {
      /* 加载中 */
      loading: true,
      /* 工序情况 */
      checkTable: {
        unitType: ''
      },
      /* 报验情况 */
      areaData: [],
      /* 楼层列表 */
      floorList: [],
      /* 颜色图例 */
      colorLegend: [],
      /* 颜色键值对map */
      colorMap: {},
      unitType: 0,
      floorHeight: 0
    }
  },
  watch: {
    checkTableId(val) {
      if (val) this.initData()
    }
  },
  mounted() {
    // 判断是什么显示类型
    if (this.showType === 'inspect') {
      this.colorLegend = [
        {
          name: '未报验',
          state: 0,
          bgColor: '#CCCCCC'
        },
        {
          name: '已报验',
          state: -1,
          bgColor: '#3EC193'
        },
        {
          name: '当前报验',
          state: 2,
          bgColor: '#b81e1e'
        }]
    } else {
      this.colorLegend = [
        {
          name: '未报验',
          state: 0,
          bgColor: '#CCCCCC'
        },
        {
          name: '待验收',
          state: -1,
          bgColor: '#cccc98'
        },
        {
          name: '验收通过',
          state: 10,
          bgColor: '#80c9b5'
        },
        {
          name: '验收不通过',
          state: 11,
          bgColor: '#eb9494'
        }]
    }

    // 将颜色图例 转化成键值对
    this.turnColorMap()
    this.initData()
  },
  methods: {
    /* 颜色图例转化键值对 */
    turnColorMap() {
      for (var c of this.colorLegend) {
        this.colorMap[c.state] = c.bgColor
      }
    },
    /* 初始化数据 */
    initData() {
      this.loading = true
      // 获取平面图数据
      getSingleProgress({ buildingId: this.buildingId, checkTableId: this.checkTableId }).then(res => {
        if (res.code === 200) {
          this.areaData = res.data.data
          this.floorList = res.data.floor
          this.floorHeight = this.floorList.length * 32 + 'px'
          this.unitType = res.data.unitType
        }
        this.loading = false
      })
      setTimeout(function() {
        if (this.loading) this.loading = false
      }, 10000)
    },
    /* 选择房屋 */
    chooseRoom(roomId) {
      if (this.isEdit) {
        if (this.selRoomIds.indexOf(roomId) < 0) {
          this.selRoomIds.push(roomId)
        } else {
          this.selRoomIds.splice(this.selRoomIds.indexOf(roomId), 1)
        }
      }
    },
    getColor(status) {
      if (this.showType === 'inspect') {
        if (status === 'undefined' || status === 0) {
          return this.colorMap[0]
        } else if (status === 2) {
          return this.colorMap[2]
        } else {
          return this.colorMap[-1]
        }
      }
      return this.colorMap[status]
    }
  }
}
</script>

<style lang="scss" scoped>
.legend{
  width: 500px;
  .color-legend{
    padding-top: 5px;
    display: flex;
    align-items: center;
    .legend-icon{
      display: inline-block;
      width: 15px;
      height: 15px;
      border-radius: 3px;
    }
    .legend-name{
      font-size: 14px;
      color: #999;
      vertical-align: top;
      margin-left: 10px;
    }
  }
}
  h3{
    line-height: 35px;
    font-weight: bold;
    color: #666;
    height: 40px;
  }
  .content {
    height: 500px;
    width: 100%;
    .content-left-item {
      width: 100%;
      color: #666;
      font-size: 14px;
      display: flex;
      align-items: center;
      height: 32px;
      justify-content: center;

      .content-left-item-left {
        display: inline-block;
        color: #666;
        font-size: 14px;
        border-right: 1px solid #666;
        height: 32px;
        line-height: 32px;
        padding: 0 5px;
        width: calc(100% - 5px);
      }

      .content-left-item-right {
        display: inline-block;
        border-top: 1px solid #ccc;
        width: 5px;
        height: 32px;
      }
    }
    .content-left-item:last-child .content-left-item-right {
      border-bottom: 1px solid #ccc;
    }

    .floor-single {
      display: flex;
      align-items: center;
      width: 90px;
      height: 30px;
      line-height: 30px;
      border-radius: 5px;
      /*border: 1px solid #ccc;*/
      justify-content: center;
      margin: 0 3px 2px 0;

      div {
        width: 100%;
      }
    }

    .floor-single1 {
      display: flex;
      align-items: center;

      .floor-single1-box {
        width: 90px;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        /*border: 1px solid #ccc;*/
        margin: 0 3px 2px 0;

      }
      .rowspan, .colspan {
        z-index: 2;
      }
      .floor-single1-box.rowspan>div {
        z-index: 10;
        height: 90px;
      }
      .floor-single1-box.colspan>div {
        z-index: 10;
      }
    }

    .object-buiding {
      width: 90px;
      height: 30px;
      line-height: 30px;
      border-radius: 5px;
      text-align: center;
      div {
        height: 100%;
      }
    }
    .wall-plane {
      width: 100%;
      height: 100%;
      flex-direction: column;
      .wall-plane-main {
        display: flex;
        border-bottom: 1px solid #ccc;
        .plane-content-block {
          width: 25%;
          display: flex;
          align-items: flex-end;
          .block-wrapper {
            width: 100%;
            position: relative;
            .block-item {
              display: flex;
              align-items: center;
              justify-content: center;
              color: #FFF;
              height: 20px;
              width: calc(100% - 10px);
              margin: 2px 5px;
              border-radius: 3px;
              cursor: pointer;
            }
          }
        }
      }
      .wall-plane-bottom {
        height: 40px;
        display: flex;
        .plane-item-label {
          flex:  0 0 25%;
          line-height: 40px;
          text-align: center;
          color: #666;
        }
      }
    }
  }
  .van-ellipsis{
    text-align: center;
  }
</style>
